<template>
  <div style="height: 100%;width: 100%;overflow:hidden;background-color:#000;">
    

    <div class="department-outer">
      <div class="zoom-box">
        <!-- <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller> -->
        <!-- <a :onclick="handleNodeClick()">aaa</a> -->
      </div>
      <div class="view-box">
        <OrgView
          @node_click="handleNodeClick"
          v-if="data"
          :data="data"
          :zoom-handled="zoomHandled"
          @on-menu-click="handleMenuClick"
          @on_button_click="handleButtonClick"
        ></OrgView>
      </div>
    </div>
  </div>
</template>

<script>
  import OrgView from './components/org-view.vue'
  import ZoomController from './components/zoom-controller.vue'
  // import { Button,Card,Message } from 'iview'
  // import { getOrgData } from '@/api/data'
  // import './index.less'
  const menuDic = {
    edit: '编辑部门',
    detail: '查看部门',
    new: '新增子部门',
    delete: '删除部门'
  }
  export default {
    name: 'org_tree_page',
    components: {
      OrgView,
      ZoomController,
      // Button,
      // Card,
      // Message
    },
    data() {
      return {
        data: {
          id: 0,
          label: 'XXX科技',
          level: 1,
          children: [
            {
              id: 2,
              label: '产品研发部',
              level: 2,
              children: [
                {
                  id: 5,
                  label: '研发-前端',
                  level: 3
                },
                {
                  id: 6,
                  label: '研发-后端',
                  level: 3
                },
                {
                  id: 9,
                  label: 'UI设计',
                  level: 3,
                  children: [
                    {
                      id: 12,
                      label: "第四层",
                      level: 4
                    },
                    {
                      id: 13,
                      label: "第四层",
                      level: 4
                    },
                    {
                      id: 14,
                      label: "第四层",
                      level: 4
                    },
                    {
                      id: 15,
                      label: "第四层",
                      level: 34
                    },
                  ]
                },
                {
                  id: 10,
                  label: '产品经理',
                  level: 3
                },
                {
                  id: 111,
                  label: '产品经理',
                  level: 3,
                }
              ]
            },
            {
              id: 3,
              label: '销售部',
              level: 2,
              children: [
                {
                  id: 7,
                  label: '销售一部',
                  level: 3
                },
                {
                  id: 8,
                  label: '销售二部',
                  level: 3
                }
              ]
            },
            {
              id: 4,
              label: '财务部',
              level: 2
            },
            {
              id: 11,
              label: 'HR人事',
              level: 2
            }
          ]
        },
        zoom: 100
      }
    },
    computed: { 
      zoomHandled() {
        return this.zoom / 100
      }
    },
    methods: {
      setDepartmentData(data) {
        data.isRoot = true
        return data
      },
      handleMenuClick({ key, data }) {
        console.log(key, data)
        this.$message({
          // duration: 5,
          message: `点击了《${data.label}》节点的'${menuDic[key]}'菜单`
        })
      },
      handleNodeClick() {
        alert("click")
      },
      getDepartmentData() {
        // getOrgData().then(res => {
        //   const { data } = res
        //   this.data = data
        // })
      },
      handleButtonClick({key,data}){
        // console.log(key,data);
        this.$message({
          // duration: 5,
          message: `点击了《${data.label}》节点的'${key}'菜单`
        })
        
      }
    },
    mounted() {
      this.getDepartmentData()
    }
  }
</script>

<style lang="css" scoped>
@import "./index";
</style>
